<script setup>
import SearchForm from '@/components/Search-Form.vue'
import TableBase from '@/components/Table-Base.vue'
import TablePagination from '@/components/Table-Pagination.vue'
import DialogBase from '@/components/Dialog-Base.vue'
import { ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import { addRailingItem, delRailingItem, editRailingItem, getRailingList } from '@/api/railing'
import { getAreaSimpleList } from '@/api/area'
import MainContent from '@/components/Main-Content.vue'

const poleTypeMap = {
    entrance: '入口',
    export: '出口',
    center: '中心',
}
const formData = ref({
    poleName: '',
    poleNumber: '',
    poleStatus: ''
})
const query = ref({
    page: 1,
    pageSize: 10
})
const listData = ref({
    list: [],
    total: 0
})
const showDialog = ref(false)
const dialogType = ref('add')
const rules = ref({
    poleName: [
        { required: true, message: '请输入一体杆名称', trigger: 'blur' },
        { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
    ],
    poleNumber: [
        { required: true, message: '请输入一体杆编号', trigger: 'blur' },
        { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
    ],
    poleIp: [
        { required: true, message: '请输入一体杆IP', trigger: 'blur' },
        { pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/, message: '请输入正确的IP地址' }
    ],
    areaId: [
        { required: true, message: '请选择安装区域', trigger: 'change' }
    ],
    poleType: [
        { required: true, message: '请选择一体杆类型', trigger: 'change' }
    ]
})
const dialogForm = ref({})
const dialogFormInstance = ref(null)
const areaSimpleList = ref([])
const columns = ref([
    {
        colKey: 'row-select',
        type: 'multiple',
        width: 60
    },
    {
        title: '序号',
        colKey: 'serial-number',
        width: 80
    },
    {
        title: '一体杆名称',
        colKey: 'poleName',
        'min-width': 200
    },
    {
        title: '一体杆编号',
        colKey: 'poleNumber',
        'min-width': 160
    },
    {
        title: '一体杆类型',
        colKey: 'poleType'
    },
    {
        title: '一体杆IP',
        colKey: 'poleIp',
        'min-width': 160
    },
    {
        title: '安装区域',
        colKey: 'areaName'
    },
    {
        title: '运行状态',
        colKey: 'poleStatus'
    },
    {
        title: '操作',
        colKey: 'option'
    }
])

const search = async () => {
    const params = JSON.parse(JSON.stringify(formData.value))
    if (params.poleStatus === '-1') params.poleStatus = null
    const res = await getRailingList({
        ...query.value,
        ...params
    })
    listData.value.list = res.data.rows.map(e => {
        e.poleStatus = e.poleStatus === 0 ? '正常' : '异常'
        e.poleType = poleTypeMap[e.poleType]
        return e
    })
    listData.value.total = res.data.total
}
const reset = () => {
    formData.value = {
        poleName: '',
        poleNumber: '',
        poleStatus: ''
    }
    search()
}
const addRailing = async () => {
    dialogType.value = 'add'
    showDialog.value = true
    areaSimpleList.value = (await getAreaSimpleList()).data
}
const getRow = async (data, type) => {
    if (type === 'del') {
        const res = await delRailingItem(data.row.id)
        if (res.code === 10000) {
            await MessagePlugin.success('删除成功!')
            if (listData.value.list.length === 1 && query.value.page > 1) query.value.page--
            await search()
        } else {
            await MessagePlugin.error(res.msg)
        }
    } else {
        showDialog.value = true
        dialogType.value = 'edit'
        dialogForm.value = JSON.parse(JSON.stringify(data.row))
    }
}
const changePage = e => {
    query.value.page = e.current
    query.value.pageSize = e.pageSize
    search()
}
const closeDialog = () => {
    showDialog.value = false
    dialogFormInstance.value.clearValidate()
}
const clickClose = () => {
    showDialog.value = false
    dialogFormInstance.value.reset()
}
const dialogConfirm = async () => {
    const valid = await dialogFormInstance.value.validate()
    if (typeof valid === 'boolean' && valid) {
        if (dialogType.value === 'add') {
            const res = await addRailingItem({
                poleName: dialogForm.value.poleName,
                poleNumber: dialogForm.value.poleNumber,
                poleIp: dialogForm.value.poleIp,
                areaId: dialogForm.value.areaId,
                poleType: dialogForm.value.poleType
            })
            if (res.code !== 10000) return
            clickClose()
            await MessagePlugin.success('添加成功！')
            await search()
        } else {
            const res = await editRailingItem({
                id: dialogForm.value.id,
                poleName: dialogForm.value.poleName,
                poleNumber: dialogForm.value.poleNumber,
                poleIp: dialogForm.value.poleIp,
                areaId: dialogForm.value.areaId,
                poleType: dialogForm.value.poleType
            })
            if (res.code !== 10000) return
            clickClose()
            await MessagePlugin.success('修改成功！')
            await search()
        }
    }
}

search()
</script>

<template>
    <main-content>
        <search-form>
            <t-form
                ref="form"
                :data="formData"
                label-width="auto"
                layout="inline"
            >
                <t-form-item label="一体杆名称">
                    <t-input v-model.trim="formData.poleName" placeholder="请输入一体杆名称"></t-input>
                </t-form-item>

                <t-form-item label="一体杆编号">
                    <t-input v-model.trim="formData.poleNumber" placeholder="请输入一体杆编号"></t-input>
                </t-form-item>

                <t-form-item label="运行状态">
                    <t-select
                        placeholder="请选择运行状态"
                        v-model.trim="formData.poleStatus"
                        showArrow>
                        <t-option key="-1" label="全部" value="-1"/>
                        <t-option key="0" label="正常" value="0"/>
                        <t-option key="1" label="异常" value="1"/>
                    </t-select>
                </t-form-item>

                <t-form-item style="min-width: auto">
                    <t-button @click="search" type="submit" style="margin-right: 10px;">查询</t-button>
                    <t-button @click="reset" variant="outline">重置</t-button>
                </t-form-item>
            </t-form>
        </search-form>

        <table-base :columns="columns" :list="listData.list">
            <template #top-btn>
                <t-button theme="primary" @click="addRailing" style="margin-right: 10px">添加一体杆</t-button>
                <t-button theme="danger" @click="addRailing" variant="outline">批量删除</t-button>
            </template>
            <template #option-table="row">
                <t-button variant="text" theme="primary" @click="getRow(row, 'edit')">编辑</t-button>
                <t-popconfirm
                    destroyOnClose
                    showArrow
                    @confirm="getRow(row, 'del')"
                    theme="warning" content="确认删除吗">
                    <t-button variant="text" theme="primary">删除</t-button>
                </t-popconfirm>
            </template>
        </table-base>

        <table-pagination :total="listData.total" @changePage="changePage"></table-pagination>

        <dialog-base :showDialog="showDialog"
                     :dialogType="dialogType"
                     :dialogTitle="dialogType === 'add' ? '添加计费规则' : '编辑计费规则'"
                     @dialogConfirm="dialogConfirm"
                     @clickClose="clickClose"
                     @closeDialog="closeDialog">
            <t-form class="dialogForm" ref="dialogFormInstance" labelAlign="top" :rules="rules" :data="dialogForm">
                <t-form-item label="一体杆名称" name="poleName">
                    <t-input placeholder="请输入规则编号" v-model.trim="dialogForm.poleName"/>
                </t-form-item>
                <t-form-item label="一体感编号" name="poleNumber">
                    <t-input placeholder="请输入规则编号" v-model.trim="dialogForm.poleNumber"/>
                </t-form-item>
                <t-form-item label="一体杆IP" name="poleIp">
                    <t-input placeholder="请输入规则编号" v-model.trim="dialogForm.poleIp"/>
                </t-form-item>
                <t-form-item label="关联区域" name="areaId">
                    <t-select
                        placeholder="请选择关联区域"
                        v-model.trim="dialogForm.areaId"
                        showArrow>
                        <t-option v-for="e in areaSimpleList" :key="e.areaId" :value="e.areaId" :label="e.areaName"/>
                    </t-select>
                </t-form-item>
                <t-form-item label="一体杆类型" name="poleType">
                    <t-select
                        placeholder="请选择一体杆类型"
                        v-model.trim="dialogForm.poleType"
                        showArrow>
                        <t-option key="export" label="出口" value="export"/>
                        <t-option key="entrance" label="入口" value="entrance"/>
                    </t-select>
                </t-form-item>
            </t-form>
        </dialog-base>
    </main-content>
</template>

<style scoped lang="scss">
</style>
